<template>
  <div class="layout-container">
    <div class="padding28 marginT10 space-between">
      <el-form :model="form" label-width="120px" class="marginT8 text-left">
        <div class="marginB22 font16 bold marginT20">{{ $t(title) }}</div>
        <el-divider content-position="left" class="marginT40"
        ><span class="color6 bold">个人信息</span></el-divider
        >
        <el-form-item label="姓名" class="marginT32">
          <el-input
              size="default"
              readonly
              v-model="form.mobile"
              :placeholder="$t('key12')"
              class="width_300"
          />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input
              size="default"
              readonly
              v-model="form.name"
              :placeholder="$t('key14')"
              class="width_300"
          />
        </el-form-item>
        <el-divider content-position="left" class="marginT40"
        ><span class="color6 bold">咨询信息</span></el-divider
        >
        <el-form-item label="咨询内容" class="marginT32">
          <el-input
              size="default"
              type="textarea"
              rows="6"
              readonly
              v-model="form.content"
              placeholder="暂无咨询内容"
              class="width_500"
          />
        </el-form-item>
        <el-form-item label="图片信息" class="marginT32">
          <template #default="scope">
            <div v-if="form.pics.length>0">
              <span v-for="(item,index) of form.pics">
                <el-image
                    class="_avatar marginR10"
                    :preview-src-list="form.pics"
                    :src="item"
                    style="width: 100px; height: 100px"
                    fit="cover"
                    preview-teleported
                />
              </span>
            </div>
            <div v-else>
              <el-tag>用户未上传照片</el-tag>
            </div>

          </template>
        </el-form-item>
        <el-divider content-position="left" class="marginT40"
        ><span class="color6 bold">处理记录</span></el-divider
        >
        <el-form-item label="备注信息" class="marginT32">
          <el-input
              size="default"
              type="textarea"
              rows="6"
              v-model="form.remark"
              placeholder="请输入备注信息"
              class="width_500"
          />
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select
              size="default"
              class="width_300"
              v-model="form.status"
              :placeholder="$t('key22')"
          >
            <el-option :value="0"  label="未处理"></el-option>
            <el-option :value="1"  label="处理中"></el-option>
            <el-option :value="2"  label="已处理"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="marginT60">
          <el-button size="large" class="marginR20" @click="gotoBack"
          >
            <el-icon class="el-icon--left ">
              <icon-return theme="outline" size="24" />
            </el-icon>{{ $t("key17") }}
          </el-button>
          <el-button size="large" type="primary" @click="onSubmit"
          >
            <el-icon class="el-icon--left ">
              <icon-save theme="outline" size="24" />
            </el-icon>
            {{ $t("key18") }}
          </el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>
<script setup lang="ts" name="consultDetail">
import {
  ref,
  getCurrentInstance,
  defineComponent,
  reactive,
  onMounted
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import service from "@/utils/system/request";
import { gotoBack, showErrorToast, showSuccessToast } from "@/utils/common";

const route = useRoute();
const router = useRouter();
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
// do not use same name with ref
const form = reactive({
  name: "",
  mobile: "",
  pics: [],
  content: "",
  remark: "",
  status: 0
});

const onSubmit = () => {
  // 保存
  let query = {
    remark: form.remark,
    status: form.status
  };
  // if(!form.remark) return showErrorToast('请完善处理信息')

  let { id } = route.params;
  service.put(`admin/consults/${id}`, query).then(({ code, data }) => {
    if (code === 0) {
      showSuccessToast("Success");
    }
  });
};
onMounted(() => {});
const { title } = route.meta;
const { t } = useI18n();

const getTableData = init => {
  let { id } = route.params;
  if (id) {
    service.get(`admin/consults/${id}`).then(({ code, data }) => {
      if (code === 0) {
        form.name = data.name;
        form.mobile = data.mobile;
        form.content = data.content;
        form.pics = data.pics;
        form.remark = data.remark;
        form.status = data.status;
      }
    });
  }
};
getTableData(true);
</script>

<style lang="scss" scoped>
.el-input {
  --el-input-width: 220px;
}
</style>
